<template>
  <p>age: {{ age }}</p>
  <p>num: {{ num }}</p>
  <button @click="age++">update age</button>
  <button @click="num++">update num</button>
</template>

<script>
import { watch, ref } from 'vue'
export default {
  setup() {
    const age = ref(18)
    const num = ref(8)
    /* watch(age, (newValue, oldValue) => {
      console.log(newValue, oldValue)
    })
    watch(num, (newValue, oldValue) => {
      console.log(newValue, oldValue)
    }) */
    // watch 可以同时监听多个 ref 数据
    watch(
      [age, num],
      (newArr, oldArr) => {
        console.log(newArr)
        console.log(oldArr)
      },
      {
        immediate: true, // 立即触发监听
      }
    )
    return {
      age,
      num,
    }
  },
}
</script>
